//其他页面轮播图
function click(id, callback) {
	document.getElementById(id).onclick = callback;
};
window.onload = function() {
	var listDiv = document.getElementById("list");
	var totalTime = 400;
	var intervalTime = 20;
	var intervalId;
	var imgCount = 4;
	var moveing = false;
	var index = 0;
	var buttonSpans = $("#buttons").children();
	var containerDiv = document.getElementById("shuffling");
	var intervalId2;
	/*给下一页绑定点击监听*/
	click("next", function() {
		nextPage(true);
	});

	click("prev", function() {
		nextPage(false);
	});
	/*给原点绑定监听*/
	clickButtons();

	autoNextPage();
	/*进入监听*/
	containerDiv.onmouseover = function() {
		clearInterval(intervalId2);
	};
	//移出的监听
	containerDiv.onmouseout = function() {
		autoNextPage();
	};

	function autoNextPage() {
		intervalId2 = setInterval(function() {
			nextPage(false);
		}, 3000);
	};

	function nextPage(next) {
		/*判断*/
		if(moveing) {
			return;
		}
		moveing = true;
		/*设置偏移量*/
		var offset;
		if(typeof next === 'boolean') {
			offset = next ? -1100 : 1100;
		} else {
			offset = -1100 * (next - index);
		};
		var itemOffset = offset / (totalTime / intervalTime);
		var targetLeft = listDiv.offsetLeft + offset;
		intervalId = setInterval(function() {
			var left = listDiv.offsetLeft + itemOffset;
			/*判断*/
			if(left == targetLeft) {
				clearInterval(intervalId);

				if(left == 0) {
					left = -imgCount * 1100;
				} else if(left == -1100 * (imgCount + 1)) {
					left = -1100;
				};
				moveing = false;
			};
			/*指定新的left坐标*/
			listDiv.style.left = left + "px";
		}, intervalTime);

		/*标识圆点*/
		updateButtons(next);
	};

	function updateButtons(next) {
		/*更新原点为一般原点*/
		buttonSpans[index].removeAttribute("class");
		/*计算原点的下标*/
		var targetIndex;
		if(typeof next == 'boolean') {
			if(next) {
				targetIndex = index + 1;
				if(targetIndex == imgCount) {
					targetIndex = 0;
				};
			} else {
				targetIndex = index - 1;
				if(targetIndex == -1) {
					targetIndex = imgCount - 1;
				};
			};
		} else {
			targetIndex = next;
		};
		/*将标圆点的下标更新为当前下标*/
		index = targetIndex;
		/*将目标圆点设置为当前圆点*/
		buttonSpans[index].className = 'on';
	};

	/* 给所有的圆点设置点击监听*/
	function clickButtons() {
		for(var i = 0, length = buttonSpans.length; i < length; i++) {
			buttonSpans[i].index = i;
			buttonSpans[i].onclick = function() {
				nextPage(this.index);
			};
		};
	};
};